<template>
    <view class="container">
        <view class="list">
            <block class="list" v-for="item in liveList" :key="item.roomid">
                <navigator
                    :url="
                        'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' +
                        item.roomid
                    "
                >
                    <view class="item" @click="headleLive(item.roomid)">
                        <view class="more-prod-pic">
                            <image
                                :src="item.feeds_img"
                                :url="
                                    'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' +
                                    item.roomid +
                                    '&custom_params=sign'
                                "
                                class="more-pic"
                                mode="widthFix"
                            ></image>
                            <view>
                                <text class="time"
                                    >开播：{{ item.start_time | formatTime }}-{{
                                        item.end_time | formatTime
                                    }}</text
                                >
                            </view>
                            <view>
                                <text class="title">{{ item.name }}</text>
                            </view>
                            <view class="person">
                                <text>主播</text>
                                <text>{{ item.anchor_name }}</text>
                            </view>
                        </view>
                    </view>
                </navigator>
            </block>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
    created() {
        this.getRequest();
    },
    computed: {
        ...mapState({
            liveList: (state) => state.live.liveList,
        }),
    },
    methods: {
        ...mapActions({
            getRequest: 'live/getRequest',
        }),
        headleLive(roomid) {
            console.log(roomid);
        },
    },
};
</script>

<style scoped>
.container {
    min-height: 100vh;
    background: #f4f4f4;
}
.list {
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: 44vw;
    margin-left: 4vw;
    margin-top: 15px;
    background: #fff;
    font-size: 20rpx;
    border-radius: 20px;
    overflow: hidden;
}
image {
    width: 100%;
}
.title {
    font-weight: 500;
    font-size: 45px;
    margin: 10px;
}
.time {
    color: #999;
    font-size: 26px;
    margin: 5px;
}
.person {
    margin: 5px;
}
.person text:first-child {
    background: antiquewhite;
    border-radius: 50%;
    width: 10vw;
    height: 10vw;
    display: inline-block;
    font-size: 36px;
    text-align: center;
    line-height: 10vw;
    color: burlywood;
}
.person text:last-child {
    font-weight: 500;
    font-size: 40px;
    margin-left: 10px;
    color: black;
}
</style>
